<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
			input {
				outline: 0;
                
			}
			textarea {
				outline: 0;
				resize: none;
			}
            div {
                border: 1px  solid red;
                resize: horizontal;
                resize: both;
                resize: vertical;
                /* 不支持内联元素。
如果是块级元素，需要overflow属性的计算值不是visible。 */
                overflow: hidden;

            }
        </style>
    </head>
    <body>
    <input type="text" name="" id="">可乐
    <textarea name="" id="" cols="30" rows="10">resize防治拖拽</textarea>
    <div>
       both：既可以水平方向拉伸，也可以垂直方向拉伸。

horizontal：仅可以水平方向拉伸，此时鼠标的指针也会变成水平方向的拉伸样式。

vertical：仅可以垂直方向拉伸，此时鼠标的指针也会变成垂直方向的拉伸样式。

block：后期新增的属性值，目前现代浏览器都提供支持。其表示沿着块级元素的排列方向拉伸，默认是垂直方向，也可能是水平方向，这取决于writing-mode的值。

inline：和block属性值类似，只是inline表示内联元素的排列方向。默认是水平方向，如果使用writing-mode属性改成垂直排版，则inline的拉伸方向就会变成垂直方向。

resize 生效的条件

不支持内联元素。
如果是块级元素，需要overflow属性的计算值不是visible。
    </div>
    </body>
</html>